<template>
	<view>
		<u-navbar :border-bottom="false" title="纠错" title-color="#fff" back-icon-color="#fff">
			<template v-slot:right>
				<text @click="submit" class="nav-bar__cancel">提交</text>
			</template>
		</u-navbar>
		<view class="feedbackTit">问题反馈类型</view>
		<view class="pickCon">
			<view class="pickConType">
				<view class="pickConNav" :class="[choseType==1?'chose':'']" @click="choseClick(1)" ><my-icon name="feedback"></my-icon><text>题目内容</text></view>
				<view class="pickConNav" :class="[choseType==2?'chose':'']" @click="choseClick(2)"><my-icon name="feedback"></my-icon><text>答案解析</text></view>
				<view class="pickConNav" :class="[choseType==3?'chose':'']" @click="choseClick(3)"><my-icon name="feedback"></my-icon><text>其他错误</text></view>
			</view>
			<view class="pick-time">
				<textarea @click="keyBord" @focus="keyBord" v-model="feeckbackTxt" class="pick-textarea" maxlength="200" placeholder="请输入您的意见或建议~"></textarea>
			</view>
		</view>
		<view class="feedbackTit">联系方式</view>
		<view class="pickCon">
			<view class="pick-input">
				<input type="number" @click="keyBord" @focus="keyBord" v-model="phone" maxlength="11" placeholder-class="inputplace" placeholder="留下联系方式，更能快速解决问题~"></input>
			</view>
		</view>
		
	</view>
</template>

<script>
export default {
	data() {
		return {
			choseType:1,//意见类型
			feeckbackTxt:'',//意见内容
			phone:'',//手机号
			queId:0//题目ID
		};
	},
	onLoad({queId}){
		this.queId=queId
	},
	methods: {
		choseClick(type){
			this.choseType=type;
		},
		keyBord() {
			uni.pageScrollTo({
				scrollTop: 0
			});
		},
		// 提交
		submit() {
			if(!this.feeckbackTxt){
				 uni.showLoading({
					 icon:'none',
				 	 title:"请输入您的纠错内容!"
				 })
				 setTimeout(function(){
					 uni.hideLoading()
				 },1000)
				 return
			}
			const data={
				"contact": this.phone.toString(),
				"content": this.feeckbackTxt.toString(),
				"queId":this.queId
			}
			// 提交意见反馈
			return new Promise((resolve, reject) => {
				this.request
					.post('/app/exercise/addError', data)
					.then(res => {
						uni.showToast({
									icon: 'success',
									title: '提交成功'
						 });
						setTimeout(function(){
							uni.navigateBack()
							uni.hideLoading()
						},1000)
						resolve()
					});
			});
		}
	}
};
</script>
<style>
page {
	background-color: #f5f5f5;
}
</style>
<style scoped lang="scss">
.nav-bar__cancel {
	font-size: 30upx;
	font-weight: 400;
	color: #ffffff;
	margin-right: 30upx;
}
.feedbackTit{ color:#636874; font-size:30upx; height:100upx; line-height: 100upx; padding-left: 30upx;}
.pick-textarea{width: 100%; height:300upx}
.pickConType{
	display: flex;
	justify-content:space-between;
	align-items: center;
	padding-top: 40upx;
	.chose{
		border: 1px solid #F45C4B!important;
		background: #FFF6F5!important;
		.iconfont{display: block;}
		text{
			color: #F45C4B;
		}
	}
	.icon-feedback{
		font-size: 20upx;
		color: #F45C4B;
		margin-right:8upx;
		display: none;
	}
	.pickConNav{
		width: 210upx;
		height: 70upx;
		line-height: 70upx;
		border-radius: 70upx;
		background: #F8F8F8;
		border: 1px solid #F8F8F8;
		color: #636874;
		display: flex;
		font-size: 28upx;
		justify-content: center;
	}
}
.pick-input{
	height: 110upx;
	input{
		height: 110upx;
	}
}
.pick-time {
	display: flex;
	align-items: center;
	margin-top: 40upx;
	font-size: 32upx;
	font-weight: 400;
	color: #363940;
	border-bottom: 1upx solid #EBEBEB;
	text {
		width: 173upx;
	}
	picker {
		flex: 1;
	}
}
.pick-time:last-child{
	border-bottom: none;
}
 .inputplace{ 
       color: #A9ABB0;
}
.pickCon{
	padding: 0 30upx;
	background: #fff;
}
</style>